<script setup lang="ts">
import { ref } from "@vue/reactivity"
interface readDataType {
    imgUrl:string,
    title:string,
    desc:string,
    userName:string,
    updating:boolean,
    userId:string
}
const props = defineProps({
    readData: Array
})
let data = ref<readDataType[]>([
    {
        imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F00%2F0B%2FChMlWl6yKqyILFoCACn-5rom2uIAAO4DgEODxAAKf7-298.jpg&refer=http%3A%2F%2Fdesk-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648543325&t=ff0cbf6372271e867aae19bfe4c3adf3',
        title: '《我爱喵喵的日常生活·后记·我深爱这个世界请你好好保护它》',
        desc: '我们活在世上，是为了保护身边的人，只要做到这些，温暖无处不在',
        userName: '肖醒',
        updating: true,
        userId: '10001'
    },
    {
        imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F00%2F0B%2FChMlWl6yKqyILFoCACn-5rom2uIAAO4DgEODxAAKf7-298.jpg&refer=http%3A%2F%2Fdesk-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648543325&t=ff0cbf6372271e867aae19bfe4c3adf3',
        title: '《我爱喵喵的日常生活·后记·我深爱这个世界请你好好保护它》',
        desc: '我们活在世上，是为了保护身边的人，只要做到这些，温暖无处不在',
        userName: '肖醒',
        updating: false,
        userId: '10002'
    },
    {
        imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F00%2F0B%2FChMlWl6yKqyILFoCACn-5rom2uIAAO4DgEODxAAKf7-298.jpg&refer=http%3A%2F%2Fdesk-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648543325&t=ff0cbf6372271e867aae19bfe4c3adf3',
        title: '《我爱喵喵的日常生活·后记·我深爱这个世界请你好好保护它》',
        desc: '我们活在世上，是为了保护身边的人，只要做到这些，温暖无处不在',
        userName: '肖醒',
        updating: true,
        userId: '10002'
    },
])
</script>

<template>
    <div class="readCardContainer">
        <div class="read-card-item" v-for="(item,index) in data" :key="index">
            <div class="card-top">
                <img
                    class="bgImg"
                    :src="item.imgUrl"
                    alt="read-bg.jpg"
                />
                <span class="status" style="color: #fff;"># {{item.updating?'连载中':'已完结'}}</span>
                <div class="title one-overflow">{{item.title}}</div>
                <div class="text-show"></div>
            </div>
            <div class="card-bottom">
                <div class="desc one-overflow">{{item.desc}}</div>
                <span class="userName">文 / {{item.userName}}</span>
            </div>
        </div>
    </div>
</template>

<style lang="less">
.readCardContainer {
    margin: 0 20px;
    margin-bottom: 100px;
    .read-card-item {
        margin-top: 20px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 1px 1px 5px 1px #999;
        .card-top {
            position: relative;
            width: 100%;
            height: 200px;
            overflow: hidden;
            .bgImg {
                width: 100%;
                height: auto;
                position: absolute;
                z-index: -1;
            }
            .status {
                position: absolute;
                left: 10px;
                top: 10px;
            }
            .text-show {
                filter: blur(10px);
                width: 100%;
                height: 40px;
                background: #000;
                opacity: 70%;
                position: absolute;
                bottom: 0;
                z-index: -1;
            }
            .title {
                color: #fff;
                font-size: 18px;
                margin-top: 165px;
            }
        }
        .card-bottom {
            margin: 10px 0 10px 10px;
            color: #999;
            .desc{
                color: #555;
                font-size: 15px;
            }
            .userName{
                font-size: 12px;
            }
        }
    }
}
</style>